<template>
    <div class="height-100">
        <div ref="preview"></div>
    </div>
</template>

<script setup lang="ts">
import { notification } from 'ant-design-vue';
import { useBoardDefaultStore } from '@/stores/BoardStore';
import { boardBuilder } from '@/lib/Board';
import { onMounted, ref } from 'vue';
import BizNode from '@/lib/BizNode';
import { Color } from '@antv/x6';
const preview = ref();

function createView() {
    const board = boardBuilder.createDefaultEditor(preview.value)
    // const board = boardBuilder.createDefaultBoard(preview.value)
    // useBoardDefaultStore().board = board
    board.getGraph().on('blank:dblclick', ({ e, x, y }) => {
        board.addRandomNode(x, y)
    })
    board.getGraph().on('node:click', ({ e, x, y, cell }) => {
        const color = Color.randomHex()
        if ((cell.data) && cell.data.type === BizNode.HighVoltageSwitch.data.type) {
            const keys = Object.keys(BizNode.HighVoltageSwitch.data.images)
            const index = Math.floor(Math.random() * keys.length)
            let imageUrl = BizNode.HighVoltageSwitch.data.images[keys[index]]
            console.log(index,imageUrl);
            
            cell.attr("image/xlink:href", imageUrl)
        } else {
            cell.attr("body/fill", color)
        }
    })
}
const openNotificationWithIcon = (type: string) => {
    notification[type]({
        message: 'Notification Title',
        description:
            'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
    });
};
onMounted(() => {
    createView()
    openNotificationWithIcon('success')
});
</script>

<style scoped>
.height-100 {
    height: calc(100vh - 68px);
}
</style>